<script lang="tsx">
import { computed, defineComponent, PropType } from 'vue'
import { isHexColor } from '@/utils/color'
import { ElDivider, ElTag, ElText } from 'element-plus'
import { DictDataType, getDictOptions } from '@/utils/dict'
import { isArray, isBoolean, isNumber, isString } from '@/utils/is'

export default defineComponent({
  name: 'MetonTag',
  props: {
    dictType: {
      type: String as PropType<string>,
      required: false
    },
    value: {
      type: [String, Number, Boolean, Array],
      required: true
    },
    // 字符串分隔符 只有当 props.value 传入值为字符串时有效
    separator: {
      type: String as PropType<string>,
      default: ','
    },
    // 每个 tag 之间的间隔，默认为 5px，参考的 el-row 的 gutter
    gutter: {
      type: String as PropType<string>,
      default: '5px'
    },
    effect: {
      type: String as PropType<string>,
      default: 'light'
    },
    isDict: {
      type: Boolean,
      default: true
    },
    isText: {
      type: Boolean,
      default: false
    },
    type: {
      type: String as PropType<string>,
      required: false
    },
    color: {
      type: String as PropType<string>,
      required: false
    },
    class: {
      type: String as PropType<string>,
      required: false
    }
  },
  setup(props) {
    const valueArr: any = computed(() => {
      // 1. 是 Number 类型和 Boolean 类型的情况
      if (isNumber(props.value) || isBoolean(props.value)) {
        return [String(props.value)]
      }
      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
      else if (isString(props.value)) {
        return props.value.split(props.separator)
      }
      // 3. 数组
      else if (isArray(props.value)) {
        return props.value.map(String)
      }
      return []
    })
    const renderDictMetonTag = () => {
      if (!props.dictType) {
        return null
      }
      // 解决自定义字典标签值为零时标签不渲染的问题
      if (props.value === undefined || props.value === null || props.value === '') {
        return null
      }
      const dictOptions = getDictOptions(props.dictType)
      if (props.isText) {
        return (
          <div
            class="dict-tag"
            style={{
              display: 'inline-flex',
              gap: props.gutter,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {dictOptions.map((dict: DictDataType) => {
              if (valueArr.value.includes(dict.value)) {
                if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
                  dict.colorType = ''
                }
                return (
                  // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                  <ElTag
                    effect={props?.effect}
                    style={dict?.cssClass ? 'color: #fff' : ''}
                    class={props?.class || null}
                    type={dict?.colorType || null}
                    color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
                    disableTransitions={true}
                  >
                    {dict?.label}
                  </ElTag>
                )
              }
            })}
          </div>
        )
      } else {
        return (
          <div
            class="dict-tag"
            style={{
              display: 'inline-flex',
              gap: props.gutter,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {dictOptions.map((dict: DictDataType) => {
              if (valueArr.value.includes(dict.value)) {
                if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') {
                  dict.colorType = ''
                }
                return (
                  // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                  <ElTag
                    effect={props?.effect}
                    style={dict?.cssClass ? 'color: #fff' : ''}
                    class={props?.class || null}
                    type={dict?.colorType || null}
                    color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
                    disableTransitions={true}
                  >
                    {dict?.label}
                  </ElTag>
                )
              }
            })}
          </div>
        )
      }
    }
    const renderMetonTag = () => {
      // 解决自定义字典标签值为零时标签不渲染的问题
      if (props.value === undefined || props.value === null || props.value === '') {
        return null
      }
      if (props.isText) {
        return (
          <ElText>
            {valueArr.value.map((dict: DictDataType) => {
              if (!dict) {
                return
              }
              return (
                // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                <ElText
                  effect={props?.effect}
                  disableTransitions={true}
                  type={props?.type || null}
                  class={props?.class || null}
                  color={props?.color && isHexColor(props?.color) ? props?.color : ''}
                >
                  <ElDivider direction={'vertical'} class={'mx-2px!'}></ElDivider>
                  {dict}
                </ElText>
              )
            })}
          </ElText>
        )
      } else {
        return (
          <div
            class="dict-tag"
            style={{
              display: 'inline-flex',
              gap: props.gutter,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {valueArr.value.map((dict: DictDataType) => {
              if (!dict) {
                return
              }
              return (
                // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                <ElTag
                  effect={props?.effect}
                  disableTransitions={true}
                  type={props?.type || null}
                  class={props?.class || null}
                  color={props?.color && isHexColor(props?.color) ? props?.color : ''}
                >
                  {dict}
                </ElTag>
              )
            })}
          </div>
        )
      }
    }
    if (props.isDict) {
      return () => renderDictMetonTag()
    } else {
      return () => renderMetonTag()
    }
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-tag) {
  height: 100%;
  padding: 2px;
}
:deep(.el-tag--dark) {
  border: none !important;
}
</style>
